{% extends 'layout/basic.html' %}
{% load static %}


{% block css %}
    <style>
    @font-face {
    font-family: 'MyFont';
    src: url("{% static "font/Font1.ttf" %}") format('truetype');
    }
    .container {
        background-color: #f5ebdc;
        padding: 20px;
        margin-top: 40px;
        margin-bottom: 40px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    body {
        background-image: url('{% static 'pics/background.png' %}');
        background-color: #ffcc00;
        color: #361f0e;
        font-family: Arial, sans-serif;
        font-size: 16px;
        background-size:100% 100%; /* 使背景图片充满整个屏幕 */
        background-repeat: no-repeat; /* 防止背景图片重复 */
        background-attachment: fixed;
    }

    .ratings {
        font-weight: bold;
        color: green;
    }
    .price {
        font-weight: bold;
        color: cadetblue;
    }
    .install span {
        font-size: 12px;
    }
    .col-md-4 {
        margin-top: 25px;
    }
    h1 {
        font-family: 'MyFont', Arial, sans-serif;
        letter-spacing: 10px;
        font-size: 60px;
        margin-left: 30px;
        margin-top: 20px;
        margin-bottom: 40px;
    }
    h1 span{
        background-color: #ff9900; /* 底色颜色 */
        padding: 12px  15px; /* 可选的内边距，用于控制文本周围的空白 */
        border-radius:50%; /* 将底色设为圆形，值为50%表示圆形 */
        margin-right: -50px; /* 负的右边距，让圆形重叠 */
        position: relative; /* 允许调整圆形的位置 */
    }
    .card {
        margin-bottom: 10px;
    }
    .btn-link {
        background-color: #ff9900;
        margin-left: 30px;
        border-radius: 5px;
        text-decoration: none;
        color: #361f0e;
        font-family: 'MyFont', Arial, sans-serif;
        font-size: 18px;
        text-align: left;
    }
    .btn-link:hover{
        background-color: #ff9900;
    }
.row{
    margin-left: 30px;
    margin-right: 30px;
}
.card.p-3 {
    height: 200px;
    background-color: #f5ebdc;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    transition: transform 0.2s ease-in-out;
}

.card.p-3:hover {
    background-color: #ffcc00;
    transform: scale(1.03);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

/* Styling for the cart */
.cart {
    font-family: 'MyFont', Arial, sans-serif;;
    background-color: #ff9900;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 30px;
    margin-right: 30px;
}

h2 {
    font-size: 24px;
    color: #361f0e;
    margin-bottom: 20px;
}

.cart-items {
    list-style: none;
    padding: 0;
}

.cart-total {
    text-align: right;
    margin-top: 20px;
}

.cart-total p {
    font-size: 18px;
    color: #361f0e;
}

/* Styling for the checkout button */
.checkout-button {
    margin-top: 40px;
    background-color: #339933;
    color: #fff;
    font-size: 18px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.checkout-button:hover {
    background-color: #ffcc00;
}
.remove-item-button{
    margin-left: 20px;
    border-radius: 5px;
    background-color: #eeb87b;
}
li{
    margin-top: 10px;
}

/* Styling for the comment input */
input[type="text"][name="comment"] {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

/* Media query for responsive design */
@media (max-width: 768px) {
    .card.p-3 {
        width: 100%;
        margin-bottom: 20px;
    }
}
        @media screen and (max-width: 768px) {
    .col-md-4 {
        flex-basis: 50%;
    }
}


    </style>
{% endblock %}


{% block content %}
    <body>
        <div class="container mt-4">
            <h1 class="big_title">
                <span>吧</span>
                <span>唧</span>
                <span>吧</span>
                <span>唧</span>
                <span>美</span>
                <span>食</span>
                <span>工</span>
                <span>坊</span>
            </h1>
        <div class="accordion" id="accordionExample">
            {% for cate in category %}
                <div class="card">
                <div class="card-header" id="headingOne">
                    <h2 class="mb-0">
                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse{{ cate }}" aria-expanded="false" aria-controls="collapseOne">
                            <span style="font-size: 2em;">{{ cate }}</span>
                        </button>
                    </h2>
                </div>
                <div id="collapse{{ cate }}" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                        <div>
                            <div class="row">
                                {% for item in menu_items %}
                                    {% if item.category == cate %}
                                        <div class="col-md-4">
                                            <button class="card p-3" style="width: 100%" data-id={{ item.id }}>
                                                <div class="d-flex flex-row mb-3"><img src="{% static item.img_url %}"  height="50">
                                                    <div class="d-flex flex-column ml-2 flex-grow-1">
                                                        <span class="text-black-50" style="font-size: 23px;margin-top: 14px">{{ item.name }}</span>
                                                    </div>
                                                    <div class="d-flex flex-column ml-2" style="font-size: 18px;margin-left: 15px">
                                                        <div class="ratings" style="margin-top: 5px">{{ item.rating }}分</div>
                                                        <div class="price" style="margin-top: 5px">¥{{ item.price }}</div>
                                                    </div>
                                                </div>
                                                <h6 class="text-left" style="font-size: 16px;margin-top: 5px;">{{ item.description }}</h6>
                                                <div class="d-flex justify-content-between install mt-3">
                                                    <span>已购</span><span>{{ item.sold }}</span><span>次</span>
                                                    <a href="{%url 'details' item_name=item.name %}" style="color: #339933;margin-left: 10px">详情&nbsp;<i class="fa fa-angle-right"></i></a>
                                                </div>
                                            </button>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                </div>
            </div>
            {% endfor %}
        </div>
            <div class="cart">
                <h2>购物车</h2>
                <ul class="cart-items">
                    <!-- 购物车项 -->
                </ul>
                <div class="cart-total">
                    <p>总计: ¥0</p>
                </div>
                {% if user_info.0 %}
                <form method="post">
                    {% csrf_token %}
                    <input type="hidden" id="order_content" name="content" value="">
                    <input type="hidden" id="total_price" name="total" value="">
                    <input type="hidden" name="guest_id" value="0">
                    <input type="hidden" name="restaurant_id" value="0">
                    <input type="text" name="comment" placeholder="备注" value="备注">
                    <button type="submit" class="checkout-button">结算</button>
                </form>
                {% else %}
                    <div>下单前请先登录</div>
                {% endif %}
            </div>
        </div>
    </body>
{% endblock %}


{% block js %}
    <script>
        $(document).ready(function(){
            $('.btn-link').click(function(){
                $($(this).data('target')).collapse('toggle');
            });
        });
         $(document).ready(function() {
             var total = 0;
             var cartItems = [];
             var cartItemsList = document.querySelector('.cart-items');
             var totalElement = document.querySelector('.cart-total p');

             $('.card.p-3').click(function () {
                 var itemId = $(this).data('id');
                 var itemName = $(this).find('.text-black-50').text();
                 var itemPrice = parseFloat($(this).find('.price').text().substring(1));
                 var cartItemHTML = '<li data-id="' + itemId + '">' + itemName + ' - ¥' + itemPrice + ' <button class="remove-item-button">删除</button></li>';

                 cartItemsList.insertAdjacentHTML('beforeend', cartItemHTML);
                 cartItems.push({id: itemId, name: itemName, price: itemPrice});

                 total += itemPrice;
                 totalElement.textContent = '总计: ¥' + total.toFixed(2);

                 var removeItemButton = cartItemsList.lastElementChild.querySelector('.remove-item-button');
                 removeItemButton.addEventListener('click', function () {
                     var itemIndex = Array.from(cartItemsList.children).indexOf(cartItemsList.lastElementChild);

                     if (itemIndex !== -1) {
                         cartItemsList.removeChild(cartItemsList.lastElementChild);

                         var removedItem = cartItems.splice(itemIndex, 1)[0];

                         total -= removedItem.price;
                         totalElement.textContent = '总计: ¥' + total.toFixed(2);
                     }
                 });
             });

             $('.checkout-button').click(function () {
                 var content = "";
                 cartItems.forEach(function (item, index) {
                     content += item.name + ' - ¥' + item.price + ', ';
                 });
                 // 去除最后一个逗号和空格
                 content = content.slice(0, -2);
                 // 获取总价
                 var total_price = total.toFixed(2);
                 // 设置备注、客人ID和餐厅ID
                 var guest_id = {{"0"}}; // 设置客人ID为0
                 var restaurant_id = "0"; // 设置餐厅ID为0
                 var comment = document.querySelector('#comment');
                 $('#order_content').val(content);
                 $('#total_price').val(total_price);
                 $('#comment').val(comment);
                 $('#guest_id').val(guest_id);
                 $('#restaurant_id').val(restaurant_id);
                 $('form').submit();
             });
         });
    </script>
{% endblock %}